<template>

   <div>
      <p>资讯管理</p>
      <div class="headers">
         <div class="dings">
            <p class="dan">搜索:</p>
         </div>
         <div class="aaa">
            <input class="inp" type="text" placeholder="  咨讯名称 ">
         </div>
         <div class="dings">
            <p class="dan">状态:</p>
         </div>
         <div class="aaa">

            <el-select v-model="value" class="m-2" placeholder="请选择" size="large">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
         </div>
         <div>
            <button class="but" @click="cha">查询</button>
            <button class="buts" @click="add">新增</button>
         </div>
      </div>
      <div class="table">
         <!-- 表格 -->
         <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="id" label="序号" width="130" />
            <el-table-column prop="title" label="文章标题" width="210" />
            <el-table-column prop="name" label="创建人" width="200" />
            <el-table-column prop="date" label="创建日期" width="250" />
            <el-table-column prop="state" label="状态" width="160">
               <template #default="aa">
                  <el-switch v-model="aa.row.state" inline-prompt active-text="正常" inactive-text="关闭"
                     @click="status(aa.row.id)" />
               </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="180">
               <template #default="scope">
                  <!-- <el-button link type="primary" size="small" @click="handleClick(scope.row)">查看</el-button> -->
                  <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
                  <el-button link type="primary" size="small" @click="del(scope.row)">删除</el-button>
               </template>
            </el-table-column>
         </el-table>
         <el-dialog v-model="dialogFormVisible" :title='str'>
            <el-form :model="form">
               <el-form-item label="序号" :label-width="formLabelWidth">
                  <el-input v-model="form.id" autocomplete="off" />
               </el-form-item>
               <el-form-item label="文章标题" :label-width="formLabelWidth">
                  <el-input v-model="form.title" autocomplete="off" />
               </el-form-item>
               <el-form-item label="创建人" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off" />
               </el-form-item>
               <el-form-item label="创建日期" :label-width="formLabelWidth">
                  <el-input v-model="form.date" autocomplete="off" />
               </el-form-item>
            </el-form>
            <template #footer>
               <span class="dialog-footer">
                  <el-button @click="dialogFormVisible = false">取消</el-button>
                  <el-button type="primary" @click="yes">
                     确定
                  </el-button>
               </span>
            </template>
         </el-dialog>
         <el-pagination @size-change="sizeChange" @current-change="currentChange" layout="total,prev, pager, next"
            :total="total" :current-page.sync="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize">

         </el-pagination>
      </div>
   </div>
</template>
<script lang='ts' setup>
import { ref, reactive } from 'vue';
import list from '@/utils/Mock.js'
import { el } from 'element-plus/es/locale';
import { onMounted } from 'vue';
const value = ref('')
const tableData = ref([...list])
const dialogTableVisible = ref(false)
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const total = ref(100)//总
const currentPage = ref(1)//当前页
const pageSize = ref(5)//每页条数


let form = ref({
   id: '',
   name: '',
   title: '',
   date: '',
   status: true,
})
// 搜索
const inp = ref()
const inpss = ref([])
onMounted(() => {
   tableData.value = inpss.value = list
})
const cha = () => {
   tableData.value = inpss.value.filter((item) => {
      if (inp.value) {
         return item.name == inp.value || item.title == inp.value
      } else {
         item
      }
   })
}
const cha1=()=>{
   tableData.value=inpss.value.filter((item)=>{
      if(inp.value){
         return item.name==inp.value||item.title==inp.value
      }else{
         item
      }
   })
}
const cha2=()=>{
   
}
// 分页
onMounted(() => {
   fetchData()
})
const fetchData = () => {
   const start = (currentPage.value - 1) * pageSize.value;
   const end = start + pageSize.value;
   tableData.value = list.slice(start, end);
}
// 当前
const sizeChange = (val) => {
   pageSize.value = val
   fetchData()
}
const currentChange = (val) => {
   currentPage.value = val
   fetchData()
}

// interface form{
//   id: '',
//    name: '',
//    title: '',
//    date: '',
//    status:true,
// }

// 新增
let zeng = ''
const add = () => {
   zeng = '新增',
      console.log('新增', zeng);
   dialogFormVisible.value = true
}

const yes = () => {
   console.log(zeng);
   dialogFormVisible.value = false
   if (zeng == '新增') {
      tableData.value.push(form.value)
      console.log(form.value);
   }
   form = ref({
      id: '',
      name: '',
      title: '',
      date: '',
   })
}
// 编辑
const edit = (val: string) => {
   zeng = '编辑'
   dialogFormVisible.value = true
   form = val
}
// 删除
const del = (row) => {
   const index = tableData.value.indexOf(row)
   if (index != -1) {
      tableData.value.splice(index, 1)
   }
}

const handleClick = (arr) => {
   dialogFormVisible.value = true
   form.value = arr
}
// 状态 
const status = (val: string) => {
   tableData.forEach((item, index: number) => {
      if (item.id == val) {
         item.status = !item.status
         if (item.status) {
            item.status = false
         } else {
            item.status = true
         }
      }
   });
   console.log('click')
}

const options = [
   {
      value: '正常',
      label: '正常',
   },
   {
      value: '关闭',
      label: '关闭',
   },
]
</script>
<style  scoped lang="scss">
.headers {
   width: 100%;
   height: 2.5rem;
   display: flex;
   margin-top: 20px;
   margin-bottom: 20px;

   .dings {
      width: 7%;
      height: 2.5rem;
   }

   .dan {
      font-size: #ccc;
      font-size: 15px;
      line-height: 35px;

   }

   .aaa {
      width: 25%;
      height: 2.5rem;
   }

   .inp {
      width: 80%;
      height: 38px;
      border: #ccc;
      border-radius: 4px;
      border: 1px solid #e4dfdf;
   }

   .but {
      width: 50px;
      height: 25px;
      color: #fff;
      background: #afaeae;
      border: none;
      margin-top: 8px;
      cursor: pointer;
   }

   .buts {
      width: 50px;
      height: 25px;
      color: #fff;
      background: #0877F2;
      border: none;
      margin-top: 8px;
      cursor: pointer;
      margin-left: 10px;
   }
}
</style>
